<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生查询</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
 <div id="app">
     <a class="btn btn-success" href="/test1/student/addStudent.html">添加学生</a>
     <table class="table table-bordered table-hover table-condensed table-striped">
       <tr>
           <th>编号</th>
           <th>名字</th>
           <th>年龄</th>
           <th>地址</th>
           <th>操作</th>
       </tr>
           <tr v-for="(s,i) in StudentArr">
                <td>{{s.id}}</td>
               <td>{{s.name}}</td>
               <td>{{s.age}}</td>
               <td>{{s.address}}</td>
               <td>
                   <button class="btn btn-danger" @click="del(s.id)" >删除</button>
                   <a  class="btn btn-primary"  :href=" '/test1/student/updateStudent.html?id='+ s.id">修改</a>
               </td>
           </tr>
     </table>

 </div>
<script>
     var haha =new Vue({
         el:"#app",
         data:{
             StudentArr:[]
         },
         methods:{
             del:function (id) {

                     if(confirm("确定删除吗")){
                     $.get("/test1/stu/delStu?id="+id,function (backData) {
                         window.location.reload();
                     });
                     }
             }
         }
     });
     $.get("/test1/stu/select",function (backData){
         haha.StudentArr=backData.data;
     });
</script>
</body>
</html>